<template>
  <div>
    <el-container style="flex-wrap: wrap;">
      <!-- 头部导航栏 -->
      <BreadHeader></BreadHeader>
      <XPannel>
        <template v-slot:header>
          <span>菜单管理</span>
        </template>
        <template v-slot:default> 
          <p>请将鼠标移到红色区域</p>
          <div class="change"></div>
        </template>
      </XPannel>
    </el-container>
  </div>
</template>
  
  <script>
// import http from "@/api/http";
import BreadHeader from "@/components/BreadHeader.vue";
import XPannel from "@/components/XPannel.vue";
import { mapState } from "vuex";

export default {
  components: {
    XPannel,
    BreadHeader
  },
  computed: {
    ...mapState(["name","picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
  data() {
    return {};
  },
  methods: {
  },
  created() {},
};
</script>
  
<style scoped>
.change{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s ease-in;
  -webkit-transition: background-color 2s ease-in;
}
.change:hover{
  background-color: blue;
}
</style>